<style lang="less" rel="stylesheet/less" type="text/less">
     .vertical-middle-modal .ivu-modal{
         top:100px;
     }
</style>
<template>
	<div>
		<Row

			type="flex"
			justify="start">
			<i-col
				push="1"
				style="width:400px;"
			>
				<Form
					ref="formValidate"
					:model="formValidate"
					:rules="ruleValidate"
					:label-width="labelWidth(145,170)"
					name="create-form">
					<Form-item
						label="人脸检测价格"
						prop="detectface">
						<InputNumber
							:min="0"
							v-model="formValidate.detectface"
							placeholder="请输入价格"
							name="create-detectface"/>
					</Form-item>

					<Form-item
						label="表情识别价格"
						prop="emotion">
						<InputNumber
							:min="0"
							v-model="formValidate.emotion"
							placeholder="请输入价格"
							name="create-emotion"/>
					</Form-item>

					<Form-item
						label="人脸关键点检测价格"
						prop="landmarks">
						<InputNumber
							:min="0"
							v-model="formValidate.landmarks"
							placeholder="请输入价格"
							name="create-landmarks"/>
					</Form-item>

					<Form-item
						label="人脸年龄性别检测价格"
						prop="agegender">
						<InputNumber
							:min="0"
							v-model="formValidate.agegender"
							placeholder="请输入价格"
							name="create-agegender"/>
					</Form-item>

					<Form-item
						label="3D人脸融合价格"
						prop="texture_swap_3d">
						<InputNumber
							:min="0"
							v-model="formValidate.texture_swap_3d"
							placeholder="请输入价格"
							name="create-texture-swap_3d"/>
					</Form-item>

					<Form-item
						label="人头检测价格"
						prop="detecthead">
						<InputNumber
							:min="0"
							v-model="formValidate.detecthead"
							placeholder="请输入价格"
							name="create-detecthead"/>
					</Form-item>

					<Form-item
						label="人脸三维重建价格"
						prop="generate_3d_model">
						<InputNumber
							:min="0"
							v-model="formValidate.generate_3d_model"
							placeholder="请输入价格"
							name="create-generate-3d-model"/>
					</Form-item>

					<Form-item
						label="人脸对比价格"
						prop="compare">
						<InputNumber
							:min="0"
							v-model="formValidate.compare"
							placeholder="请输入价格"
							name="create-compare"/>
					</Form-item>

					<Form-item
						label="人脸老化价格"
						prop="aging">
						<InputNumber
							:min="0"
							v-model="formValidate.aging"
							placeholder="请输入价格"
							name="create-aging"/>
					</Form-item>

					<Form-item
						label="人脸融合价格"
						prop="swapface">
						<InputNumber
							:min="0"
							v-model="formValidate.swapface"
							placeholder="请输入价格"
							name="create-swapface"/>
					</Form-item>

					<Form-item
						label="头发分割价格"
						prop="hairsegement">
						<InputNumber
							:min="0"
							v-model="formValidate.hairsegement"
							placeholder="请输入价格"
							name="create-hairsegement"/>
					</Form-item>

					<Form-item
						label="头发染色价格"
						prop="haircolor">
						<InputNumber
							:min="0"
							v-model="formValidate.haircolor"
							placeholder="请输入价格"
							name="create-haircolor"/>
					</Form-item>

					<Form-item
						label="妆容迁移价格"
						prop="makeupswap">
						<InputNumber
							:min="0"
							v-model="formValidate.makeupswap"
							placeholder="请输入价格"
							name="create-makeupswap"/>
					</Form-item>

					<!-- 备注 -->
					<Form-item
						label="备注"
						prop="remark"
					>
						<i-input
							v-model="formValidate.remark"
							placeholder="请输入备注"
							name="create-remark"
							type="text"/>
					</Form-item>

					<Form-item
						label="计费类型"
					>

						<RadioGroup
							v-model="formValidate.type"
							size="large"

						>
							<Radio
								label="默认"
								@click="handleSubmit('formValidate')"
							/>
							<Radio
								label="活动"
							/>
						</RadioGroup>
					</Form-item>

					<!-- 开始时间 -->

					<Form-item
						v-if="formValidate.type==='活动'"
						label="开始时间"
						prop="started_at"
					>
						<DatePicker
							v-model="formValidate.started_at"
							:style="{width: '260px'}"
							placeholder="请输入开始时间"
							type="datetime"
							placement="top"
							name="create-started_at"
							@on-change="changeSTDate"/>
					</Form-item>

					<!-- 结束时间 -->
					<Form-item
						v-if="formValidate.type==='活动'"
						label="结束时间"

						prop="ended_at"
					>
						<DatePicker
							v-model="formValidate.ended_at"
							:style="{width: '260px'}"
							placeholder="请输入结束时间"
							type="datetime"
							placement="top"
							name="create-ended_at"
							@on-change="changeEDDate"/>
					</Form-item>

					<!-- 按钮 -->
					<Form-item>
						<Button
							type="primary"
							name="create__submit"
							@click="handleSubmit('formValidate')">
							提交
						</Button>
						<Button
							type="warning"
							style="margin-left: 8px"
							@click="handleReset('formValidate')">重置
						</Button>
					</Form-item>
				</Form>
			</i-col>
		</Row>

	</div>
</template>
<script>
import labelWidthMixin from '../../../labelWidthMixin';

export default {
	name: 'PlanEdit',
	mixins: [labelWidthMixin],
	props: {
		data: {
			type: Object,
			default() {
				return {};
			},
		},
	},
	data() {
		return {
			modalPrices: {},
          	formValidate: {
				ended_at: null,
				started_at: null,
				detectface: 0,
				type: '默认',
				emotion: 0,
				landmarks: 0,
				agegender: 0,
				texture_swap_3d: 0,
				detecthead: 0,
				generate_3d_model: 0,
				compare: 0,
				aging: 0,
				swapface: 0,
				hairsegement: 0,
				haircolor: 0,
				makeupswap: 0,
				remark: '',
			},
			real_started_at: null,
			real_ended_at: null,
			ruleValidate: { // 验证表单数据规则
				detectface: [
					{
						required: true,
						type: 'number',
						message: '价格是必须的',
						trigger: 'blur,change',
					},
				],
				emotion: [
					{
						required: true,
						type: 'number',
						message: '价格是必须的',
						trigger: 'blur,change',
					},
				],
				landmarks: [
					{
						required: true,
						type: 'number',
						message: '价格是必须的',
						trigger: 'blur,change',
					},
				],
				agegender: [
                  	{
						required: true,
						type: 'number',
						message: '价格是必须的',
						trigger: 'blur,change',
					},
				],
				texture_swap_3d: [
					{
						required: true,
						type: 'number',
						message: '价格是必须的',
						trigger: 'blur,change',
					},
				],
				detecthead: [
					{
						required: true,
						type: 'number',
						message: '价格是必须的',
						trigger: 'blur,change',
					},
				],
				generate_3d_model: [
					{
						required: true,
						type: 'number',
						message: '价格是必须的',
						trigger: 'blur,change',
					},
				],
				compare: [
					{
						required: true,
						type: 'number',
						message: '价格是必须的',
						trigger: 'blur,change',
					},
				],
				aging: [
					{
						required: true,
						type: 'number',
						message: '价格是必须的',
						trigger: 'blur,change',
					},
				],
				swapface: [
					{
						required: true,
						type: 'number',
						message: '价格是必须的',
						trigger: 'blur,change',
					},
				],
				hairsegement: [
					{
						required: true,
						type: 'number',
						message: '价格是必须的',
						trigger: 'blur,change',
					},
				],
				haircolor: [
					{
						required: true,
						type: 'number',
						message: '价格是必须的',
						trigger: 'blur,change',
					},
				],
				makeupswap: [
					{
						required: true,
						type: 'number',
						message: '价格是必须的',
						trigger: 'blur,change',
					},
				],
				remark: [
                 	{
						required: true,
						message: '备注是必须的',
						trigger: 'blur,change',
					},
				],
				started_at: [
					{
						required: true,
						type: 'date',
						message: '开始时间是必须的',
						trigger: 'blur,change',
					},
				],
				ended_at: [
					{
						required: true,
						type: 'date',
						message: '结束时间是必须的',
						trigger: 'blur,change',
					},
				],

			},
		};
	},
	created() {
		this.modalPrices = JSON.parse(this.data.prices);
		this.real_started_at = this.data.start_time;
		this.real_ended_at = this.data.end_time;
		this.formValidate.detectface = Number(this.modalPrices.face.detectface);
		this.formValidate.emotion = Number(this.modalPrices.face.emotion);
		this.formValidate.landmarks = Number(this.modalPrices.face.landmarks);
		this.formValidate.agegender = Number(this.modalPrices.face.agegender);
		this.formValidate.texture_swap_3d = Number(this.modalPrices.face.texture_swap_3d);
		this.formValidate.detecthead = Number(this.modalPrices.face.detecthead);
		this.formValidate.generate_3d_model = Number(this.modalPrices.face.generate_3d_model);
		this.formValidate.compare = Number(this.modalPrices.face.compare);
		this.formValidate.aging = Number(this.modalPrices.face.aging);
		this.formValidate.swapface = Number(this.modalPrices.face.swapface);
		this.formValidate.hairsegement = Number(this.modalPrices.face.hairsegement);
		this.formValidate.haircolor = Number(this.modalPrices.face.haircolor);
		this.formValidate.makeupswap = Number(this.modalPrices.face.makeupswap);
		this.formValidate.remark = this.data.remark;
		this.formValidate.type = this.data.type;
		this.formValidate.started_at = this.data.start_time;
		this.formValidate.ended_at = this.data.end_time;

	},
	methods: {
		changeSTDate(date) {
			this.real_started_at = date;
		},

		changeEDDate(date) {
			this.real_ended_at = date;
		},
		/**
         * 重置表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleReset(name) {
			this.$refs[name].resetFields();
			this.formValidate.type = '默认';
		},
		/**
         * 提交表单
         * @param  {string} name {表单上的ref值}
         * @return {undefined}
         */
		handleSubmit(name) {

			this.$refs[name].validate((valid) => {
				if (valid) {
					this.$emit('update', this.formDataCreate());
				} else {
					this.$Message.error('填写的信息有误');
				}
			});
		},
		formDataCreate() {
             	const new_object = {
				prices: {
					face: {
						detectface: this.formValidate.detectface,
						emotion: this.formValidate.emotion,
						landmarks: this.formValidate.landmarks,
						agegender: this.formValidate.agegender,
						texture_swap_3d: this.formValidate.texture_swap_3d,
						detecthead: this.formValidate.detecthead,
						generate_3d_model: this.formValidate.generate_3d_model,
						compare: this.formValidate.compare,
						aging: this.formValidate.aging,
						swapface: this.formValidate.swapface,
						hairsegement: this.formValidate.hairsegement,
						haircolor: this.formValidate.haircolor,
						makeupswap: this.formValidate.makeupswap,
					},
				},
				type: this.formValidate.type,
				remark: this.formValidate.remark,
				_method: 'PUT',
				id: this.data.id,
			};
			if (this.formValidate.type === '活动') {
				new_object.start_time = this.real_started_at;
				new_object.end_time = this.real_ended_at;
			}
			return new_object;
		},

	},
};
</script>
